<template>
  <a-breadcrumb>
    <a-breadcrumb-item>系统管理</a-breadcrumb-item>
    <a-breadcrumb-item>标签管理</a-breadcrumb-item>
  </a-breadcrumb>

  <a-card :loading="false">
    <header class="header_right">
      <a-button type="primary" @click="handleAdd">新增</a-button>
    </header>
    <a-table
        :columns="columns"
        :data-source="data"
        :pagination="false"
        :loading="loading"
    >
      <template #bodyCell="{ column, text }">
        <template v-if="column.dataIndex === 'status'">
          <a-tag color="success" v-if="text === '1'">正常</a-tag>
          <a-tag color="error" v-else>禁用</a-tag>
        </template>
        <template v-if="column.dataIndex === 'handle'">
          <a-button type="primary" @click="handleEdit(text)" >编辑</a-button>
          <a-button  danger @click="handleDel(text)">删除</a-button>
        </template>
      </template>
    </a-table>
    <a-pagination v-model:current="query.pageNum"  show-size-changer :total="total" @showSizeChange="onShowSizeChange" />
  </a-card>
  <category-write v-model:values="write" @handle-modal="handleModal" />
</template>

<script setup lang="ts">
import {createVNode, reactive, ref, watch} from "vue";
import {message, Modal} from "ant-design-vue";
import {ExclamationCircleOutlined} from "@ant-design/icons-vue";
import {adminDelCategory, adminGetTagList} from "@/api/api";
import CategoryWrite from "@/views/admin/category/categoryWrite.vue";
import {Option} from "@/enums/option";
type APIParams = {
  pageNum?: number;
  pageSize?: number;
};

const query: APIParams = reactive({
  pageNum:1,
  pageSize:10,
})
const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
  },
  {
    title: '标签名称',
    dataIndex: 'name',
    width: '25%',
  },
  {
    title: '状态',
    dataIndex: 'status'
  },
  {
    title: '创建时间',
    dataIndex: 'createTime'
  },
  {
    title: '操作',
    dataIndex:'handle',
    width: '20%',
  }
];
const  loading = ref<boolean>(true);
const  data = ref([]);
const  total = ref<number>(0);
async function getData() {
  loading.value = true;
  const res:any =  await adminGetTagList(query);
  data.value = res.data.rows
  total.value = res.data.total;
  data.value.forEach((res:any)=>{
    res['handle'] = res.id;
  })
  loading.value = !loading.value;
}
getData();

const onShowSizeChange = (pagNum: number, pageSize: number) => {
  query.pageNum = pagNum;
  query.pageSize = pageSize;
};

watch(query,()=>{
  getData();
})

function handleDel(id:any) {
  Modal.confirm({
    icon: createVNode(ExclamationCircleOutlined),
    content: '你确定删除该分类？',
    okText: '确认',
    cancelText: '取消',
    async onOk(){
      const res:any = await adminDelCategory(id);
      if(res.code !=200) return message.error(res.msg);
      message.success(res.msg);
      await getData();
    }
  })
}

const write = ref({
  modal: false,
  id:null,
  option:Option.add
});

function handleEdit(id:any) {
  write.value.modal =  !write.value.modal;
  write.value.id =  id;
  write.value.option =  Option.edit;
}
function handleAdd() {
  write.value.modal =  !write.value.modal;
  write.value.option =  Option.add;
}

function handleModal() {
  getData();
}


</script>

<style lang="less" scoped>
/deep/ .ant-table-wrapper {
  .ant-btn {
    margin: 0 10px;
  }
}
</style>